<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexImovel.xhtml')}" value="Imóvel" update="@form" immediate="true"/> >
                    <p:commandLink  value="Cadastrar Imóvel" update="@form" immediate="true"/>
                </div>
            </h:form>

            <p:panel id="panelCriarImovel" header="Área Conflitante">
                <p:focus for="panelCriarImovel"/>
                <h:form acceptcharset="utf-8" id="criarImovel" enctype="multipart/form-data"> 
                    <p:messages id="msg"/>
                    <fieldset class="ui-fieldset">
                        <legend><h:outputLabel value="Georeferenciamento"/></legend>

                        <h:panelGrid columns="2"  
                                     styleClass="textAlignRightBold">
                            <h:outputLabel value="Interessado:  "/>                            
                            <p:inputText value="#{managerCoord.voGmap.interessado}" required="true"
                                         title="Interessado" label="Interessado" size="44"/>
                            <h:outputLabel value="Descrição:  "/>                            
                            <p:inputTextarea value="#{managerCoord.voGmap.name}" required="true"
                                             title="Informação" label="Informação" cols="60"/>
                        </h:panelGrid>

                        <fieldset class="ui-fieldset">
                            <legend>
                                <h:outputLabel value="Coordenadas:  "/>  </legend>

                            
                            <h:panelGrid columns="7" id="convertCoor" 
                                         styleClass="textAlignRightBold">
                                <h:outputLabel value="N" />
                                <p:inputText  value="#{managerCoord.convN}"  size="12"/>
                                <h:outputLabel value="E" />
                                <p:inputText  value="#{managerCoord.convE}"  size="12"/>
                                <h:outputLabel value="Zona" />
                                <p:row>
                                    <p:inputText  id="zona" value="#{managerCoord.convZona}"  size="5"/>
                                    <p:watermark for="zona" value="M" /> 
                                </p:row>

                                <p:commandButton icon="ui-icon-circle-plus" 
                                                 value="Adicionar"
                                                 actionListener="#{managerCoord.converterCoord()}"
                                                 action="#{managerCoord.initMap()}"
                                                 label="Adicionar"
                                                 title="Adicionar Coordenada"
                                                 update="msg, gridRef, @this"
                                                 style="width: 105px;"
                                                 process="convertCoor, @this" />

                            </h:panelGrid>
                            <br/>

                            <h:panelGrid  columns="2" id="gridRef" style="width: 100%;"
                                          styleClass="textAlignRight" columnClasses="alignTop, alignTop"  > 

                                <p:dataTable var="gf" id="coordList" value="#{managerCoord.lstGeoRef}" 
                                             style="width: 515px;" editable="true" rowIndexVar="rowGf">  

                                    <p:ajax event="rowEdit" update=":criarImovel:gmapConflict"
                                            listener="#{managerCoord.initMap()}" /> 
                                    <f:facet name="header">  
                                        Coordenadas  
                                    </f:facet>  
                                    <p:column headerText="#" style="width:5%">  
                                          <h:outputText value="#{rowGf + 1}" />  
                                    </p:column>
                                    <p:column headerText="N" style="width:30%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convN}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convN}" style="width:100%"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column headerText="E" style="width:30%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convE}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convE}" style="width:100%" label="Year"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column headerText="Zona" style="width:20%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convZona}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convZona}" style="width:100%" label="Year"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column style="width:15%">  
                                        <p:rowEditor />  
                                        <p:commandButton icon="ui-icon-circle-close" 

                                                         actionListener="#{managerCoord.removeGeoRef(gf)}"
                                                         disabled="#{managerCoord.lstGeoRef.size() > 1 ? false : true}"
                                                         update=":criarImovel:gridRef, @this, coordList" 
                                                         process=":criarImovel:gridRef, @this"
                                                         label="Excluir Coordenadas"
                                                         title="Excluir Coordenadas"
                                                         style="width:15px; height: 15px;"/>
                                    </p:column>  

                                </p:dataTable>

                                <p:column>
                                    
                                    
                                    <p:gmap center="#{managerCoord.centerMap}" id="gmapConflict"
                                            zoom="#{managerCoord.zoomMap}" type="HYBRID" 
                                            style="width:300px;height:200px" model="#{managerCoord.polygonModel}">
                                        <p:ajax event="stateChange" listener="#{managerCoord.onStateChange}" update="mapDialog" />  
                                    </p:gmap>

                                    <p:commandButton type="button" icon="ui-icon-newwin"  
                                                     onclick="dlg.show()" update="zoomMap" style="float:right;" />  

                                    <p:dialog widgetVar="dlg" header="Georeferenciamento" id="mapDialog"  width="625" height="400" >  
                                        <p:gmap id="zoomMap" center="#{managerCoord.centerMap}" 
                                                zoom="14" type="HYBRID" streetView="true"
                                                style="width:625;height:400px;"  model="#{managerCoord.polygonModel}">

                                        </p:gmap>  
                                    </p:dialog> 

                                </p:column>

                            </h:panelGrid>
                        </fieldset> 


                        <p:dialog widgetVar="gmapIntesc" header="Conflito em GeoLocalização" modal="true" >
                            <h:panelGrid columns="2">
                                <h:panelGrid columns="1"  styleClass="textAlignRightBold" style="width:600px; height:400px">
                                    <p:gmap center="#{managerCoord.centerMap}" zoom="23" type="HYBRID" 
                                            style="width:600px;height:400px"   model="#{managerCoord.polygonIntesction}">

                                    </p:gmap>
                                    <p:row>
                                        <table style=" width: 100%">
                                            <tr>
                                                <td style="width: 22px;">
                                                    <div style="background-color: #d93c3c; border-top: 1px solid #FFFFFF;
                                                         height: 20px; width: 20px;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div><h:outputLabel value="Conflito" style="float: left !important;"/></div>
                                                </td>
                                            </tr>
                                            <ui:repeat value="#{managerCoord.listGmap}" var="lg">
                                                <tr>
                                                    <td style="width: 22px;">
                                                        <div style="background-color: #{lg.cor}; border-top: 1px solid #FFFFFF;
                                                             height: 20px; width: 20px;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <h:outputLabel value="#{lg.name}" style="float: left !important;" />
                                                        </div>
                                                    </td>
                                                </tr>

                                            </ui:repeat>
                                        </table>
                                    </p:row>
                                </h:panelGrid>

                                <p:row rendered="false">
                                    <p:panel id="infoObj" header="Imóvel Conflitante "  style="height: 200px; ">
                                        <h:panelGrid columns="2"  styleClass="textAlignRightBold" style=" width: 90%;">

                                            <h:outputLabel value="Registro: " />
                                            <h:outputText value="#{managerCoord.gmapIntersection.imovel.registro}" />
                                            <h:outputLabel value="Tipo: " />
                                            <h:outputText value="#{managerCoord.gmapIntersection.imovel.objeto.tipo}" />
                                            <h:outputLabel value="Endereço: " />
                                            <h:outputText value="#{managerCoord.gmapIntersection.imovel.objeto.tipo_logradouro.nome.toLowerCase()} #{managerCoord.gmapIntersection.imovel.objeto.logradouro}" />
                                            <h:outputLabel value="Registrado em: " />
                                            <h:outputText value="#{managerCoord.gmapIntersection.imovel.dataCadastro}">
                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                            </h:outputText>

                                        </h:panelGrid>
                                    </p:panel>
                                    <p:panel id="infoObjConf" header="Confrontações "  
                                             style="height:70px; overflow: auto;">
                                        <h:panelGrid columns="2"  styleClass="textAlignRightBold" style="width: 60px;">
                                            <h:outputLabel value="Área : " />
                                            <h:outputText value="#{managerCoord.gmapIntersection.area}" >
                                            </h:outputText>
                                        </h:panelGrid>
                                    </p:panel>
                                </p:row>
                            </h:panelGrid>

                        </p:dialog>
                    </fieldset>
                    <div class="buttonAction">

                        <p:commandButton icon="ui-icon-plusthick" value="Adicionar" 
                                         actionListener="#{managerCoord.add()}" 
                                         update="@form" process="@form"/>

                        <p:commandButton icon="ui-icon-close" value="Limpar" 
                                         actionListener="#{managerImovel.init()}" update="@form" />  

                        <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">  
                            <f:facet name="start">  
                                <h:graphicImage value="/media/img/loading.gif" />  
                            </f:facet>  

                            <f:facet name="complete">  
                                <h:outputText value="" />  
                            </f:facet>  
                        </p:ajaxStatus>

                    </div>

                    <p:dataTable
                        rows="15"  var="coord" 
                        value="#{managerCoord.listGmap}"
                        emptyMessage="Nenhum Registro" rowIndexVar="rowCoord">  
                        <f:facet name="header">  
                            Comparar
                        </f:facet>
                         <p:columnGroup type="header">  
                            <p:row>  
                                <p:column headerText="#" style="width:5%" />  
                                <p:column headerText="N" />  
                                <p:column headerText="E" />  
                                <p:column headerText="ZONA" />  
                            </p:row>  
                        </p:columnGroup> 
                        <p:subTable var="gf" value="#{coord.georef}">
                             <f:facet name="header">  
                                 <h:outputText value="#{coord.name}" />  
                            </f:facet>
                            <p:column headerText="#" style="width:5%">  
                                          <h:outputText value="#{rowCoord + 1}" />  
                             </p:column>
                            <p:column headerText="N" style="width:30%">  
                                <h:outputText value="#{gf.convN}" /> 
                            </p:column>  

                            <p:column headerText="E" style="width:20%">  
                                <h:outputText value="#{gf.convE}" />  
                            </p:column>  

                            <p:column headerText="Zona" style="width:20%"> 
                                <h:outputText value="#{gf.convZona}" />  

                            </p:column> 
                        </p:subTable>

                    </p:dataTable> 

                    <div class="buttonAction">

                        <p:commandButton icon="ui-icon-disk" value="Verificar" 
                                         actionListener="#{managerCoord.grilagem()}" 
                                         update="@form" process="@form"/>

                        <p:commandButton icon="ui-icon-close" value="Cancelar" 
                                         actionListener="#{managerCoord.init()}" update="@form" />  


                    </div>
                </h:form>
            </p:panel>
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        </ui:define>
    </ui:composition>
</html>

